<template>
  <div class="headerTitle">客户信息</div>
  <div class="mainArea">
    <div class="areaItem">
      <div class="itemTitle">姓名</div>
      <div class="itemValue">
        <div>{{ userInfo.custName }}</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">身份证</div>
      <div class="itemValue">
        <div>{{ userInfo.cardNo }}</div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">联系电话</div>
      <div class="itemValue">
        <div>{{ userInfo.custPhone }}</div>
      </div>
    </div>
  </div>

  <div class="headerTitle">补充信息</div>
  <div class="mainArea">
    <div class="areaItem">
      <div class="itemTitle">婚姻状态</div>
      <div class="itemValue" @click="marriageShow = true">
        <div>
          {{ supplyInfo.marriageState ? supplyInfo.marriageState : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <up-picker
          :show="marriageShow"
          :columns="marriageCols"
          :defaultIndex="[0]"
          @cancel="marriageShow = false"
          @confirm="checkMarriage"
        ></up-picker>
      </div>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="200rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="supplyInfo"
      >
        <up-form-item
          label="联系人姓名"
          prop="relatorName"
          customStyle="width:100%;"
        >
          <up-input
            v-model="supplyInfo.relatorName"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999 !important;font-size:28rpx !important;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="formItem">
      <up-form
        labelPosition="left"
        labelWidth="200rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="supplyInfo"
      >
        <up-form-item
          label="联系人手机号"
          prop="relatorPhone"
          customStyle="width:100%;"
        >
          <up-input
            v-model="supplyInfo.relatorPhone"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999;font-size:28rpx;"
            inputAlign="right"
          ></up-input>
        </up-form-item>
      </up-form>
    </div>
    <div class="areaItem">
      <div class="itemTitle">联系人关系</div>
      <div class="itemValue" @click="relationShow = true">
        <div>
          {{ supplyInfo.relationState ? supplyInfo.relationState : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <up-picker
          :show="relationShow"
          :columns="relationCols"
          :defaultIndex="[0]"
          @cancel="relationShow = false"
          @confirm="checkRelation"
        ></up-picker>
      </div>
    </div>
    <div class="areaItem">
      <up-form
        labelPosition="left"
        labelWidth="200rpx"
        labelStyle="color:#666666;font-size:28rpx"
        :model="supplyInfo"
      >
        <up-form-item
          label="电子邮箱"
          prop="emailStart"
          customStyle="width:100%;"
        >
          <up-input
            v-model="supplyInfo.emailStart"
            border="none"
            color="#999999"
            fontSize="28rpx"
            placeholder="请输入"
            placeholderStyle="color:#999999;font-size:28rpx;"
            inputAlign="right"
          >
          </up-input>
        </up-form-item>
      </up-form>
      <div class="itemValue" @click="emailShow = true">
        <div>@</div>
        <div>
          {{ supplyInfo.emailEnd ? supplyInfo.emailEnd : "请选择" }}
        </div>
        <div class="selectIcon"></div>
        <up-picker
          :show="emailShow"
          :columns="emailCols"
          :defaultIndex="[0]"
          @cancel="emailShow = false"
          @confirm="checkEmail"
        ></up-picker>
      </div>
    </div>
    <div class="adressArea">
      <div class="adressTitle">通讯地址</div>
      <div class="adressInfo">
        <div class="detailedAdress">
          <up-form :model="supplyInfo">
            <up-form-item prop="detailedAdress" customStyle="padding:0;">
              <up-input
                v-model="supplyInfo.detailedAdress"
                border="none"
                color="#999999"
                fontSize="28rpx"
                placeholder="请输入详细地址"
                placeholderStyle="color:#999999;font-size:28rpx;"
                inputAlign="right"
              >
              </up-input>
            </up-form-item>
          </up-form>
        </div>
      </div>
    </div>
    <div class="areaItem">
      <div class="itemTitle">
        <up-form :model="supplyInfo">
          <up-form-item prop="bankCard" customStyle="padding:0;">
            <up-input
              v-model="supplyInfo.bankCard"
              border="none"
              color="#999999"
              fontSize="28rpx"
              placeholder="放款/还款银行卡号："
              placeholderStyle="color:#999999;font-size:28rpx;"
              inputAlign="left"
            >
            </up-input>
          </up-form-item>
        </up-form>
      </div>
      <div class="itemValue">
        <div class="selectBankCard" @click="checkBankCard">校验</div>
      </div>
    </div>
  </div>

  <!-- <div class="headerTitle">面谈承诺书</div>
  <div class="mainArea">
    <div class="areaItem">
      <div class="itemTitle"></div>
      <div class="itemValue">
        <div class="sendFaceBook" @click="sendFaceBook">点击生成</div>
      </div>
    </div>
  </div> -->

  <div class="headerTitle">面签合影以及其他情况说明</div>
  <div class="mainArea">
    <up-textarea
      v-model="supplyInfo.remark"
      placeholder="请输入"
      autoHeight
      border="none"
    ></up-textarea>
    <div class="addImgArea">
      <img
        src="./img/new_icon_01.png"
        alt=""
        class="chooseImg"
        @click="chooseImg"
      />
      <img
        v-for="(item, index) in imgList"
        :key="index"
        :src="item"
        alt=""
        class="chooseImg"
      />
    </div>
    <div class="btnArea">
      <div class="btn" @click="closePage">关闭</div>
      <div class="btn" @click="save">保存</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import * as http from "../../utils/http";
import { onLoad } from "@dcloudio/uni-app";
import { useAppStore } from "../../store/index";
import { useImagePicker } from '@/hooks/useImagePicker';
const { imgList, chooseImg, uploadFiles } = useImagePicker();  
const store = useAppStore();
const userInfo = reactive({});
onLoad((option) => {
  let param = JSON.parse(option.value);
  userInfo.custName = param.custName;
  userInfo.cardNo = param.cardNo;
  userInfo.custPhone = param.custPhone;
  userInfo.orderNo = param.orderNo;
  userInfo.orderId = param.orderId;
});
const supplyInfo = reactive({
  marriageState: "",
  relatorName: "",
  relatorPhone: "",
  relationState: "",
  emailStart: "",
  emailEnd: "",
  detailedAdress: "",
  bankCard: "",
  remark: "",
});
// 婚姻状态
const marriageShow = ref(false);
const marriageCols = reactive([["已婚", "未婚", "离异", "丧偶"]]);
const checkMarriage = (e) => {
  // #业务代码
  console.log(e.value[0]);
  supplyInfo.marriageState = e.value[0];
  marriageShow.value = false;
};

// 联系人关系
const relationShow = ref(false);
const relationCols = reactive([["配偶", "亲属", "朋友", "其他"]]);
const checkRelation = (e) => {
  // #业务代码
  console.log(e.value[0]);
  supplyInfo.relationState = e.value[0];
  relationShow.value = false;
};

// 邮箱
const emailShow = ref(false);
const emailCols = reactive([
  [
    "qq.com",
    "163.com",
    "126.com",
    "139.com",
    "sohu.com",
    "aliyun.com",
    "189.com",
    "hotmail.com",
    "gmail.com",
    "sina.com",
    "yahoo.com",
  ],
]);
const checkEmail = (e) => {
  // #业务代码
  console.log(e.value[0]);
  supplyInfo.emailEnd = e.value[0];
  emailShow.value = false;
};

let idNoCheck = true;
// let idNoCheck = false;
// 校验银行卡号
const checkBankCard = () => {
  http
    .creditSceneInspectCheckCard({
      orderId: userInfo.orderId,
      bankCard: supplyInfo.bankCard,
      relationName: userInfo.custName,
    })
    .then((res) => {
      idNoCheck = true;
      wx.showToast({
        title: "银行卡号校验成功",
        icon: "none",
        duration: 1000,
        mask: true,
      });
    })
    .catch((err) => {
      wx.showToast({
        title: "银行卡号校验失败",
        icon: "none",
        duration: 1000,
        mask: true,
      });
    });
};
// 发送面谈承诺书
const sendFaceBook = () => {
  http
    .creditSceneInspectSendSms({
      orderNo: userInfo.orderNo,
      orderId: userInfo.orderId,
    })
    .then((res) => {
      wx.showToast({
        title: "面谈承诺书已发送",
        icon: "none",
        duration: 1000,
        mask: true,
      });
    })
    .catch((err) => {
      wx.showToast({
        title: "面谈承诺书发送失败",
        icon: "none",
        duration: 1000,
        mask: true,
      });
    });
};
// 保存
const save = async () => {
  if (!idNoCheck) {
    wx.showToast({
      title: "请先校验银行卡号",
      icon: "none",
      duration: 1000,
      mask: true,
    });
  } else {
    const fileInfoList = await uploadFiles();  
    console.log('fileInfoList----', fileInfoList);
    http
      .creditSceneInspectAdd({
        orderId: userInfo.orderId,
        maritalStatus:
          supplyInfo.marriageState === "已婚"
            ? "1"
            : supplyInfo.marriageState === "未婚"
            ? "2"
            : supplyInfo.marriageState === "丧偶"
            ? "3"
            : supplyInfo.marriageState === "离婚"
            ? "4"
            : supplyInfo.marriageState === "其他"
            ? "9"
            : "",
        relationName: supplyInfo.relatorName,
        relationPhone: supplyInfo.relatorPhone,
        relationType:
          supplyInfo.relationState === "配偶"
            ? "2"
            : supplyInfo.relationState === "亲属"
            ? "3"
            : supplyInfo.relationState === "朋友"
            ? "4"
            : "9",
        email: supplyInfo.emailStart + "@" + supplyInfo.emailEnd,
        address: supplyInfo.detailedAdress,
        bankCard: supplyInfo.bankCard,
        remark: supplyInfo.remark,
        idNoCheck: idNoCheck === false ? "0" : "1",
        fileInfoList
      })
      .then((res) => {
        sendFaceBook();
        wx.showToast({
          title: "保存成功",
          icon: "none",
          duration: 2000,
          mask: true,
        });
      })
      .catch((err) => {
        wx.showToast({
          title: "保存失败",
          icon: "none",
          duration: 2000,
          mask: true,
        });
      });
  }
};
// 关闭
const closePage = () => {
  wx.navigateBack();
};
</script>

<style scoped lang="scss">
.headerTitle {
  font-size: 24rpx;
  color: #666666;
  padding-top: 20rpx;
  padding-left: 34rpx;
  padding-bottom: 10rpx;
}
.mainArea {
  background-color: #fff;
  padding: 0 35rpx;
  .adressArea {
    padding-left: 5rpx;
    height: 120rpx;
    border-bottom: 1rpx solid #eeeeee;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    .adressTitle {
      color: #666666;
      font-size: 28rpx;
    }
    .adressInfo {
      width: 100%;
      display: flex;
      align-items: center;
      .fuzzyAdress {
        width: 40%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 28rpx;
        color: #999999;
        .selectIcon {
          width: 12rpx;
          height: 12rpx;
          border-top: 2rpx solid #999999;
          border-right: 2rpx solid #999999;
          transform: rotate(45deg);
          margin-left: 13rpx;
        }
      }
      .detailedAdress {
        width: 100%;
      }
    }
  }
  .formItem {
    padding-left: 5rpx;
    height: 88rpx;
    border-bottom: 1rpx solid #eeeeee;
  }
  .areaItem {
    padding-left: 5rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eeeeee;
    .itemTitle {
      font-size: 28rpx;
      color: #666666;
    }
    .itemValue {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 28rpx;
      color: #999;
      .selectIcon {
        width: 12rpx;
        height: 12rpx;
        border-top: 2rpx solid #999999;
        border-right: 2rpx solid #999999;
        transform: rotate(45deg);
        margin-left: 13rpx;
      }
      .selectBankCard {
        width: 100rpx;
        height: 52rpx;
        line-height: 52rpx;
        border-radius: 26rpx;
        text-align: center;
        background-color: #e0eafe;
        font-size: 24rpx;
        color: #406eb0;
      }
      .sendFaceBook {
        width: 110rpx;
        height: 52rpx;
        line-height: 52rpx;
        border-radius: 26rpx;
        text-align: center;
        background-color: #e0eafe;
        font-size: 24rpx;
        color: #406eb0;
        border: 1rpx solid #406eb0;
      }
    }
  }
  .addImgArea {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    .chooseImg {
      width: 90rpx;
      height: 82rpx;
    }
  }
  .btnArea {
    margin: 50rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 50rpx;
    .btn {
      width: 110rpx;
      height: 54rpx;
      line-height: 54rpx;
      text-align: center;
      background-color: #c0c0c0;
      color: #fff;
      font-size: 24rpx;
      margin: 0 15rpx;
      border-radius: 8rpx;
    }
  }
}
</style>
